<template>
    <div>
        <div class="data-mian">
            <el-row  :type="!row?'flex':''" :justify="!row?'space-between':''">
                <el-col  :span="row?24:8" v-for="(data,index) in dataList" :key="index" >
                    
                    <div v-if="row" :class="index%2===0?'animation-left':'animation-right'"  @click="dataHandler(index,data)">
                        <el-card shadow="hover" class="data-item" >
                       
                            <div class="data-title text-display-a-line">
                                {{ data.title }}
                            </div>
                            <div class="data-info">
                                <div class="data-abstract text-display-multiline">
                                    {{ data.abstract }}
                                </div>
                                <div class="data-cover">
                                    <el-image  :src="data.cover==null?require('@/assets/7封面.png'):data.cover"></el-image>

                                </div>
                                <div>
                                    <slot name="btn" :row="data"></slot>
                                </div>
                            </div>
                     
                       
                        </el-card>
                    </div>
                    <div v-else @click="dataHandler(index,data)">
                        <el-card shadow="hover" class="data-item no-row">
                       
                            <div style="width: 100%;display: flex;justify-content: center;" >
                                <el-image  :src="data.cover==null?require('@/assets/7封面.png'):data.cover"></el-image>
                                
                            </div>
                            <div class="data-title text-display-a-line" style="padding-top: 10px;padding-bottom: 10px;text-align: center;">
                                    {{ data.title }}
                            </div>
                            <div class="text-display-multiline-no-row" style="width: 100%;" >
                                {{ data.abstract }}
                            </div>
                        </el-card>
                    </div>
                    
                    
                    
                </el-col>
               

            </el-row>
            
        </div>

    </div>
</template>

<script>


export default {
    data(){
        return{


        }
    },
    props:['dataList','row'],
    methods:{
        dataHandler(index,data){
            this.$emit('handler',index,data);
        }

    },
    components:{

    }

}
</script>

<style lang="scss" scoped>

.text-display-a-line{
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		-webkit-line-clamp: 1;
		-webkit-box-orient:vrtical;

	}
  //多行
  .text-display-multiline-no-row{
 
  overflow: hidden;
  word-break: break-all;//允许换行
  text-overflow: ellipsis;
  display: -webkit-box;//对象为伸缩盒子模型显示
  -webkit-box-orient: vertical;//设置或检索伸缩盒子的子对象元素排列方式
  -webkit-line-clamp: 2;//行数

  }
  .text-display-multiline{
 
 overflow: hidden;
 word-break: break-all;//允许换行
 text-overflow: ellipsis;
 display: -webkit-box;//对象为伸缩盒子模型显示
 -webkit-box-orient: vertical;//设置或检索伸缩盒子的子对象元素排列方式
 -webkit-line-clamp: 5;//行数

 }
.data-mian{
    width: 100%;

}
.data-item{
    
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 5PX;
    
    
}

.no-row{
    width: 96%;
    height: 300px;
    animation: fadeInDown 1s;
}


.animation-left{
    animation: fadeInLeft 2s;
}
.animation-right{
    animation: fadeInRight 2s;
}

.data-info{
    display: flex;
    justify-content: space-between;
}
.data-abstract{
    width: 80%;
}
.data-cover{
    width: 20%;
}
.data-title{
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

</style>